<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3d变换</title>
    <style>
        heml,body{
            height: 100%;
        }
        body{
            background-color: black;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        div{
            width: 300px;
            height: 300px;
            background-color: blue;

            /*设置3D视图的透视距离,该属性用于3D元素的父元素.*/
            perspective: 600px;
            /*兼容Safari和chrome,*/
            -webkit-perspective: 600px;

            /*保留3D效果.该属性用于3D元素的父元素.*/
            transform-style: preserve-3d;

            -webkit-transform-style: preserve-3d;

            /*设置3d视图的视角*/
            perspective-origin: 60% 10%;
        }
        div>section{
            width: 300px;
            height: 300px;
            background-color: red;
            transform: rotateY(30deg);
            font-size: 35px;

            /*设置3D视图的透视距离,该属性用于3D元素的父元素.*/
            perspective: 600px;
            /*兼容Safari和chrome,*/
            -webkit-perspective: 600px;

            /*保留3D效果.该属性用于3D元素的父元素.*/
            transform-style: preserve-3d;

            -webkit-transform-style: preserve-3d;

            perspective-origin: right center;
            
        }

        div>section>section{
            width: 200px;
            height: 200px;
            background-color: gold;
            /*transform:rotateY(90deg);*/

            /*translate3d是3d效果的位移变换
            rotate3d可以在三个方向同时完成旋转,前三个值取[0.0,1.0],分别代表x,y,z轴,
            最后一个值是旋转角度,xyz会根据各自的值旋转相应的角度.
            sacle3d是3d效果的缩放
            */
            transform: translate3d(30px,20px,30px) rotate3d(0,0,1,30deg) sacle3d(.8,.6,1)

            
        }
    </style>
</head>
<body>
   <div>
       <section>
           HTML5
           <section></section>
       </section>
   </div> 
</body>
</html>